<template>
  <v-chart :option="option"></v-chart>
</template>

<script setup>
import { ref, onMounted } from 'vue'
// 引入echarts的baidu地图扩展
import 'echarts/extension/bmap/bmap.js'
import { getMapData } from '@/api/index.js'

const option = ref({})

const renderChart = (scatterData, effectScatterData) => {
  option.value = {
    // 使用baidu地图做为底图
    bmap: {
      key: 'WRPDpUT50zDtgwlnux6dpaL0eSwerIOb', // 申请的baidu地图ak
      center: [108.954355, 34.346721], // 地图中心点坐标
      zoom: 5, // 地图的缩放级别(默认值5)
      roam: true, // 是否开启鼠标缩放和平移漫游
    },
    title: {
      text: '新中地网点地图',
      left: 'center',
    },
    // 全局的提示框组件
    tooltip: {},
    series: [
      // 普通的散点图
      {
        type: 'scatter',
        name: '新中地外卖',
        // 对于地图类型的data格式: [{name: '北京', value: [经度, 纬度, 销售额]}]
        coordinateSystem: 'bmap', // 指定使用百度地图做为坐标系
        data: scatterData,
        encode: {
          value: 2, // 指定第三个维度为值
        },
        // 自定义散点的大小, 销售额 / 100
        symbolSize(value) {
          return value[2] / 10
        },
      },
      // 带动效(涟漪效果)的散点图
      {
        type: 'effectScatter',
        name: '新中地外卖TOP10',
        coordinateSystem: 'bmap',
        data: effectScatterData,
        encode: {
          value: 2, // 指定第三个维度为值
        },
        // 自定义散点的大小, 销售额 / 100
        symbolSize(value) {
          return value[2] / 10
        },
        // 设置涟漪效果
        rippleEffect: {
          brushType: 'stroke',
          color: 'purple',
        },
        // 设置局部的提示框的样式
        tooltip: {
          formatter(params) {
            return `${params.name}<br/>销售额: ${params.value[2]}`
          },
          textStyle: {
            color: 'green',
          },
        },
        itemStyle: {
          color: '#5270D4',
        },
      },
    ],
  }
}
function converData(obj) {
  const res = []
  const { city, geodata } = obj
  city.forEach((item) => {
    const geo = geodata[item.name]
    if (geo) {
      res.push({
        name: item.name,
        //geo是经纬度[121.15, 31.89],
        // value: [...geo, item.value],
        value: [geo[0],geo[1], item.value],
      })
    }
  })
  return res
}
onMounted(async () => {
  const res = await getMapData()
  // console.log(res)
  // console.log(converData(res))
  const scatterData = converData(res)
  // 按照销售额从大到小的排序
  const effectScatterData = scatterData.sort((a, b) => b.value[2] - a.value[2]).slice(0, 10)

  renderChart(scatterData, effectScatterData)
})
</script>

<style scoped></style>

